<template>
  <div class="latter-centent" v-if="dialogVisible">
    <div class="latter-body">
      <div class="latter-header" v-if="tabUserType==1">
        <span class="latter-header-first" @click="showLetterDetail('add')"> <em v-if="tabIndex == 0">发送信件</em></span>
        <div class="latter-header-title">
          <div class="latter-header-title-inline" v-if="!rootStatus">
            <em :class="tabIndex==0?'active-letter':''" @click="tabLine(1)">我的收件</em>
            <em :class="tabIndex==1?'active-letter':''" @click="tabLine(0)">我的发件</em>
          </div>
        </div>
        <span class="latter-header-last"><i class="el-icon-close" @click="$emit('update:visible',false)"></i></span>
      </div>
      <div class="latter-header" v-else>
        <span class="latter-header-first"></span>
        <div class="latter-header-title">
        </div>
        <span class="latter-header-last"><i class="el-icon-close" @click="$emit('update:visible',false)"></i></span>
      </div>
      <div class="latter-bodyLine">
        <div class="hearder-search">
          <div class="breadcrumb-container input-val-box">
            <el-date-picker
                v-model="addtime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                class="mr-10"
                :picker-options="pickerOptions1">
            </el-date-picker>
            <el-input v-model="nameUser" placeholder="发件人" size="small" class="mr-10 w-140"></el-input>
            <el-select v-model="statusLine" placeholder="已读状态" size="small"
                       class="w-140 mr-10">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in statusList"
                         :key="index"></el-option>
            </el-select>
            <el-select v-model="replyLine" placeholder="回复状态" size="small"
                       class="w-140 mr-10">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in replyList"
                         :key="index"></el-option>
            </el-select>
            <!--            <el-button type="primary" size="small" @click="searchLetter()"><i class="el-icon-search"></i>搜索</el-button>-->
            <!--            <el-button size="small" @click="refresh"><i class="el-icon-refresh"></i>刷新</el-button>-->
            <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
                class="el-icon-search"></i>搜索
            </el-button>
            <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
            <el-switch
                v-model="rootStatus"
                active-text="全校投信"
                inactive-text="个人投信"
                @change="changeSwitch"
                v-if="tabIndex==1&&allDataStatus"
                class="ml-30">
            </el-switch>
          </div>
        </div>
        <!--        校园教职工提交的信件-->
        <div v-if="tabUserType==1">
          <el-table
              :data="tableData"
              style="width: 100%"
              height="540">
            <el-table-column
                prop="create_time"
                label="收件日期"
                align="center"
                :key="1"
                v-if="tabIndex==1">
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="发件日期"
                align="center"
                :key="2"
                v-if="tabIndex==0">
            </el-table-column>
            <el-table-column
                label="收件人"
                align="center"
                :key="4"
                v-if="tabIndex==0 || rootStatus">
              <template slot-scope="scope">
                {{ scope.row.receive.realname }}
              </template>
            </el-table-column>
            <el-table-column
                label="发件人"
                align="center"
                :key="3"
                v-if="tabIndex==1">
              <template slot-scope="scope">
                <span v-if="scope.row.is_anonymous==1">匿名</span>
                <span v-else>{{ scope.row.user.realname }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="已读状态"
                align="center"
                :key="6"
                v-if="tabIndex==1">
              <template slot-scope="scope">
              <span :style="{'color':scope.row.is_read == 1?'green':'red'}">
                {{ scope.row.is_read == 1 ? '已读' : '未读' }}
              </span>
              </template>
            </el-table-column>
            <el-table-column
                label="回复状态"
                align="center"
                :key="7">
              <template slot-scope="scope">
                <span v-if="scope.row.is_anonymous==1">无</span>
                <span v-else :style="{'color':scope.row.reply?'green':''}">{{
                    scope.row.reply ? '已回复' : '无'
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="120"
                :key="8"
                align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="showLetterDetail('edit',scope.$index)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else>
          <el-table
              :data="tableData"
              style="width: 100%"
              height="540">
            <el-table-column
                prop="create_time"
                label="收件日期"
                align="center"
                :key="1">
            </el-table-column>
            <el-table-column
                label="家长姓名"
                align="center"
                :key="2">
              <template slot-scope="scope">
                <span v-if="scope.row.is_anonymous==1">匿名</span>
                <span v-else>{{ scope.row.parents.name }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--                label="收件人"-->
            <!--                align="center"-->
            <!--                :key="3">-->
            <!--              <template slot-scope="scope">-->
            <!--                {{ scope.row.receive.realname }}-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
                label="已读状态"
                align="center"
                :key="4">
              <template slot-scope="scope">
              <span :style="{'color':scope.row.is_read == 1?'green':'red'}">
                {{ scope.row.is_read == 1 ? '已读' : '未读' }}
              </span>
              </template>
            </el-table-column>
            <el-table-column
                label="回复状态"
                align="center"
                :key="5">
              <template slot-scope="scope">
                <span v-if="scope.row.is_anonymous==1">无</span>
                <span v-else :style="{'color':scope.row.reply?'green':''}">{{
                    scope.row.reply ? '已回复' : '无'
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="120"
                align="center"
                :key="6">
              <template slot-scope="scope">
                <el-button size="small" @click="showLetterDetail('edit',scope.$index)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 50px">
          <el-pagination
              :hide-on-single-page="paginationStatus"
              style="text-align: right"
              background
              :page-size="page.pagesize"
              :current-page="page.pageindex"
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleSizeChange"></el-pagination>
        </div>
      </div>
      <div class="latter-footer"></div>
      <div class="tab-change-btn">
        <div class="tab-change-btn-list" :class="tabUserType==2?'active-btn-centent':''" @click="changLetterFn(1)">
          <span>园内投信</span></div>
        <div class="tab-change-btn-list" :class="tabUserType==1?'active-btn-centent':''" @click="changLetterFn(2)">
          <span>家长投信</span></div>
        <!--        <div class="tab-change-btn-list" :class="tabUserType==3?'active-btn-centent':''" @click="changLetterFn(3)">-->
        <!--          <span>园长信箱</span></div>-->
      </div>
    </div>
    <letterAdd :visible.sync="addLetterVisible" :letterId="letterId" :tabType="tabIndex"
               @changeStatus="changeStatus" :tabUserType="tabUserType" :eidtType="eidtType"
               :rootStatus="rootStatus"></letterAdd>
  </div>
</template>

<script>
import letterAdd from './Add'
import {pagination} from '@/utils/util.js'
import {mapGetters} from "vuex";

export default {
  components: {
    letterAdd
  },
  props: ['visible'],
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (Number(this.userInfo.is_root) === 1) {
          this.allDataStatus = true;
        }
        this.getInitFn()
      }else{
        this.tabUserType = 1
      }
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      addLetterVisible: false,
      editForm: {
        name: '',
        start_time: '',
        end_time: ''
      },
      eidtType: 'add',
      addtime: [],
      rootStatus: false, // 显示状态
      allDataStatus: false, // 按键权限
      pickerOptions1: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e7 // 不包括今天
          return time.getTime() > Date.now()
        }
      },
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      tabIndex: 1, // 我的收发件 0 发 1 收
      tabUserType: 1, // 校园 家长 邮件
      tableData: [],
      letterId: null,
      activeTableIndex: 0, // 编辑当前序列号
      paginationStatus: false, // 分页状态
      searchForm: {},
      nameUser: '', // 发件人
      statusLine: 0,
      replyLine: 0,
      statusList: [{name: '全部', id: 0}, {name: '未读', id: 1}, {name: '已读', id: 2}], // 已读状态
      replyList: [{name: '全部', id: 0}, {name: '未回复', id: 1}, {name: '已回复', id: 2}] // 回复状态
    }
  },
  created() {

  },
  methods: {
    // 获取校园当前数据
    async getInitFn() {
      // this.rootStatus
      // type 0 发件 1 收件
      let dataOption = {
        p: this.page.pageindex,
        type: this.rootStatus ? 2 : this.tabIndex,
        start_time: '',
        end_time: '',
        realname: this.nameUser
      }
      if (this.addtime.length) {
        dataOption.start_time = this.addtime[0];
        dataOption.end_time = this.addtime[1];
      }
      let data = await this.$fetch(this.api.letter.tearcher.index, dataOption)
      console.log('data:', data)
      this.tableData = this.transFromJson(data.list.data)
      this.page.total = data.list.total
      this.paginationStatus = data.list.total ? false : true;
      console.log(data)
    },
    // 获取家长信件
    async getParentsInitFn() {
      // type 0发件1收件
      let dataOption = {
        p: this.page.pageindex,
        type: this.rootStatus ? 2 : 1, // 1 收件
        start_time: '',
        end_time: '',
        user_name: this.nameUser,
        status: this.statusLine === 0 ? '' : (this.statusLine === 1 ? 0 : 1), // 0 全部 1 未读 2 已读
        is_reply: this.replyLine === 0 ? '' : (this.replyLine === 1 ? 0 : 1)
      }
      // statusLine: 0,
      //     replyLine: 0,
      if (this.addtime.length) {
        dataOption.start_time = this.addtime[0];
        dataOption.end_time = this.addtime[1];
      }
      let data = await this.$fetch(this.api.letter.parents.index, dataOption)
      console.log('data:', data)
      this.tableData = this.transFromJson(data.list.data)
      this.page.total = data.list.total
      this.paginationStatus = data.list.total ? false : true;
      console.log(data)
    },
    tabLine(option) {
      this.tabIndex = option
      this.tableData = []
      this.getInitFn()
    },
    // 切换园内家长投信
    changLetterFn(option) {
      this.tableData = [];
      this.nameUser = '';
      this.addtime = [];
      this.tabUserType = option; // 1 校园 2 家长
      this.tabIndex = 1;
      this.statusLine = 0;
      this.replyLine = 0;
      if (option === 1) {
        this.getInitFn()
      } else {
        this.getParentsInitFn()
      }
    },
    // searchLetter() {
    //   this.page.pageindex = 1
    //   this.getInitFn()
    // },
    // // 重置
    // refresh() {
    //   this.addtime = []
    //   this.page.pageindex = 1
    //   this.getInitFn()
    // },
    // 编辑添加
    showLetterDetail(type, index) {
      if (type === 'edit') {
        this.letterId = this.tableData[index].id;
      }
      this.eidtType = type;
      this.addLetterVisible = true;
    },
    transFromJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    changeStatus(option) {
      console.log('shoudao:', option)
      // if (option) {
      //   let n = this
      //   let list_ = this.transFromJson(n.tableData[n.activeTableIndex])
      //   list_.reply = option;
      //   this.$set(n.tableData, n.activeTableIndex, list_)
      // }
      if (Number(option) === 1) {
        this.getInitFn();
      } else {
        this.getParentsInitFn();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 全校数据切换
    changeSwitch() {
      console.log('rootStatus:', this.rootStatus)
      // this.getInitFn() // 校园
      // this.getParentsInitFn() // 家长
      this.tableData = []
      if (Number(this.tabUserType) === 1) {
        this.getInitFn()
      } else {
        this.getParentsInitFn()
      }
    },
    searchFn(option) {
      this.tableData = [];
      if (option === 'refresh') {
        this.nameUser = '';
        this.addtime = [];
        this.statusLine = 0;
        this.replyLine = 0;
      }
      this.page.pageindex = 1;
      this.tabUserType === 1 ? this.getInitFn() : this.getParentsInitFn();
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.latter-centent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.latter-body {
  background: #fff;
  border-radius: 8px;
  width: 87%;
  box-shadow: 0 0 20px #333;
  position: relative;
}

.tab-change-btn {
  position: absolute;
  width: 260px;
  height: 43px;
  background: #fff;
  left: 0px;
  top: -43px;
  cursor: pointer;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: flex;
  overflow: hidden;
  border: 3px solid #2b2c48;
  box-shadow: 0 0 20px #333;
}

.tab-change-btn-list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #409EFF;
}

.tab-change-btn-list:hover span {
  text-decoration: underline;
}

.tab-change-btn span {
  display: block;
  color: #fff;
}

.latter-header {
  height: 50px;
  line-height: 50px;
  display: flex;
  /*background: #2b2c48;*/
  color: #fff;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  /*border-top-left-radius: 8px;*/
  border-top-right-radius: 8px;
  border-bottom: 1px solid #333;
}

.latter-header span {
  display: block;
  width: 90px;
}

.latter-header span.latter-header-first {
  text-align: center;
  cursor: pointer;
}

.latter-header span.latter-header-first em {
  background: #409EFF;
  color: #fff;
  font-style: normal;
  display: block;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px;
  box-shadow: 0 2px 4px #ef6f14;
}

.latter-header span.latter-header-first em:hover {
  text-decoration: underline;
}

.latter-header span.latter-header-last {
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  color: #000;
}

.latter-header .latter-header-title {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.latter-footer {
  height: 40px;
}

.hearder-search {
  padding: 10px;
}

.latter-header-title-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.latter-header-title em {
  font-style: normal;
  display: block;
  width: 100px;
  height: 32px;
  background: #409EFF;
  color: #fff;
  cursor: pointer;
  line-height: 32px;
  border: 1px solid #333;
  font-weight: normal;
  font-size: 14px;
}

.latter-header-title em:hover {
  text-decoration: underline;
}

.latter-header-title em:first-child {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  border-right: 1px solid #2b2c48;
}

.latter-header-title em:last-child {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  border-left: 1px solid #2b2c48;
}

.active-letter {
  background: #fff !important;
  line-height: 32px !important;
  color: #000 !important;
}

.active-btn-centent {
  background: #fff;
}

.active-btn-centent span {
  color: #000 !important;
}

.latter-bodyLine {
  padding: 0 5px;
}
</style>
